<template>
  <div class="wrapper">
    <div class="echarts" ref="echarts"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
import echarts, {EChartOption, ECharts} from 'echarts';

@Component
export default class Charts extends Vue {
  @Prop() options!: EChartOption;
  chart?: ECharts;

  mounted() {
    if (!this.options) {
      return console.error('options 为空');
    }
    this.chart = echarts.init(this.$refs.echarts as HTMLDivElement);
    this.chart.setOption(this.options);
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  overflow-x: auto;
}

.echarts {
  width: 100%;
  height: 250px;
}
</style>
